<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>商品销售</title>
	<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
	<link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>
<div class="layui-form" lay-filter="proSalesInfo">
	<div>
		<div style="text-align: center;">
			<h2>销售管理</h2>
		</div>
		<div style="color: red;">
			<span style="float: right;">
				订单号：<input style="outline: none;border: none;background-color:#F2F2F2;color: red;" name="salOrdId" readonly/>
			</span>
		</div>
	</div>

	<!-- 功能栏 -->
	<form class="layui-form" style="height: 100px;">
		<div class="layui-col-md12">
			<div class="layui-panel" style="padding-top: 20px;margin-top: 5px;">
				<div class="layui-form-item layui-font-black ">
					<div class="layui-inline">
						<label class="layui-form-label">客户名称：</label>
						<div class="layui-input-inline">
							<input type="text" name="custId" class="layui-input" id="customerName" placeholder="请选择">
						</div>
						<script type="text/html" id="customerOperater">
							<div class="layui-btn-container">
								<a class="layui-btn layui-btn-sm" lay-event="addCustomer" id="addCustomer">新增客户</a>
							</div>
						</script>
						<script type="text/html" id="customerOperaterIn">
							<div class="layui-btn-container">
								<a class="layui-btn layui-btn-sm" lay-event="editCustomer" id="editCustomer">修改</a>
							</div>
						</script>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">出货仓库：</label>
						<div class="layui-input-inline">
							<select name="depotId" lay-filter="depot" id="depot">

							</select>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">销售日期：</label>
						<div class="layui-input-inline">
							<input type="text" name="salOrdDate" class="layui-input" id="saleDate" placeholder="yyyy-MM-dd">
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
	<!-- 表头功能 -->
	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-sm" lay-event="addProduct">添加商品</button>
			<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delProduct">删除商品</button>
		</div>
	</script>
	<!-- 商品销售信息表格 -->
	<table class="layui-hide" id="currentTableId" lay-filter="currentTableId"></table>
	<!-- 底部选项 -->
	<form class="layui-form">
	<div class="layui-panel" style="padding-top: 20px;margin-top: 5px;">
		<div class="layui-form-item layui-font-black ">
			<label class="layui-form-label">应收金额:</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="salOrdReceivable" readonly lay-verify="required" autocomplete="off"
					   class="layui-input">
			</div>
			<label class="layui-form-label">实收金额:</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="salOrdPaidIn" lay-verify="required" placeholder="请输入" autocomplete="off"
					   class="layui-input">
			</div>
			<label class="layui-form-label">经办人:</label>
			<div class="layui-input-inline" style="width: 100px;">
				<select name="empId" lay-filter="emp" id="emp">

				</select>
			</div>
			<label class="layui-form-label">原始单号:</label>
			<div class="layui-input-inline">
				<input type="text" name="" lay-verify="required" placeholder="请输入" autocomplete="off"
					   class="layui-input">
			</div>
			<label class="layui-form-label">开药幅数:</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="salOrdNum" value="1" lay-verify="required" placeholder="请输入" autocomplete="off"
					   class="layui-input">
			</div>
		</div>
		<div class="layui-form-item layui-font-black ">
			<label class="layui-form-label">备注:</label>
			<div class="layui-input-inline" style="width: 320px;margin-right:60px;">
				<input type="text" name="salOrdComment" lay-verify="required" placeholder="请输入" autocomplete="off"
					   class="layui-input">
			</div>
			<button type="button" class="layui-btn layui-btn-sm" id="confirm">确定</button>
			<!-- <button type="button" class="layui-btn layui-btn-sm">退出</button> -->
		</div>
	</div>
</form>
</div>

<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    //声明一个用于保存所选销售商品信息的数组
	var chooseProInfoLists = [];

	//声明一个保存获取所选仓库的变量
	var inveDescDepot = "";

    //声明一个全局的变量，判断editProduct保存按钮的处理方式
    /*
        true:
            ① sell_productManager.html 页面中 rowDouble(currentTableId)销售管理 双击编辑操作
            ② sell_addProduct.html 页面中 rowDouble(selectProInfo)所选商品 双击编辑操作
        false：
            ① sell_addProduct.html 页面中 rowDouble(proBill) 商品清单 双击编辑操作
            ② sell_addProduct.html 页面中 rowDouble(proListInfo) 商品列表 双击编辑操作
            ③ sell_addProduct.html 页面中 rowDouble(recentPurchase) 最近进货 双击编辑操作
    */
    //window.editProductFlag = true;

    layui.use(['form', 'table', 'layer', 'tableSelect', 'util'], function() {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            laydate = layui.laydate,
            tableSelect = layui.tableSelect,
            util = layui.util;

        //时间控件（销售日期）
        laydate.render({
            elem: '#saleDate',
            value: new Date(),
            isInitValue: true
        });

        var tableList = [];

        //声明一个用于存储选中的客户编号的变量
        var custId;
        // 客户信息下拉选项
        tableSelect.render({
            elem: '#customerName',
            id: 'custmoter',
            checkedKey: 'id',
            table: {
                url: '/showCustomerInfos',
                cellMinWidth: 100 ,	//全局定义常规单元格的最小宽度，layui 2.2.1 新增
                toolbar: '#customerOperater',
                cols: [[
                    { type: 'radio' },
                    { field: 'custId', title: '编号' },
                    { field: 'custSex', title: '客户性别' },
                    { field: 'custName', title: '联系人' },
                    { field: 'custPhone', title: '联系电话' },
                    { field: 'custAddress', title: '联系地址' },
                    { field: 'custTypeName', title: '客户类型',templet:function(d){
                         return d.customerType.custTypeName
						} },
                    { title: '操作按钮',toolbar: '#customerOperaterIn'}
                ]]
            },
            done: function (elem, data) {
                var NEWJSON = []
                layui.each(data.data, function (index, item) {
                    //填充input标签的值为客户名称
                    NEWJSON.push(item.custName);
                    //设置销售订单中的客户编号
					custId = item.custId;
                })
                elem.val(NEWJSON.join(","));
            }
        });

        // 表格表头(商品销售信息)
        tableList[0] = table.render({
            elem: '#currentTableId',
            data: chooseProInfoLists,
            toolbar: '#toolbarDemo',
            totalRow: true , //开启合计行
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: 'checkbox', width: 50},
                {field: 'proId', width: 110, title: '商品编号', sort: true},
                {field: 'inveDescName', width: 120, title: '商品名称', sort: true},
                {field: 'inveDescUnit', width: 100, title: '单位'},
                {field: 'inveDescSize', width: 110, title: '产品规格', sort: true},
                // {field: 'agentiaTypeName', width: 80, title: '剂型'},
                {field: 'inveDescPostil', width: 110, title: '批准文号', sort: true},
                {field: 'inveDescStartDate', width: 110, title: '生产日期', sort: true},
                {field: 'inveDescValidityDate', width: 110, title: '有效期至', sort: true},
                {field: 'inveDescPrice', width: 100, title: '单价', sort: true},
                {field: 'proNum', width: 100, title: '数量', sort: true,totalRow: true},
                {field: 'proDiscount', width: 100, title: '折扣率', sort: true},
                {field: 'proDescTotal', width: 100, title: '总金额', sort: true,totalRow: true},
                {field: 'inveDescManufacturer', width: 110, title: '生产厂商'}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

        //创建一个集合用于存储选中行的下标
        var trIndexList = [];
        //监听表格复选框选择（销售管理主页）
        table.on('checkbox(currentTableId)', function(obj){
            //获取选中行的下标(从零开始)
            var trIndex = obj.tr.attr('data-index');
            //获取是否为全选
            var isAll = table.checkStatus('currentTableId').isAll;

            //判断是全选则添加所有所选商品
            if(isAll){
                trIndexList = [];
                for(var i=0,len=chooseProInfoLists.length;i<len;i++){
                    trIndexList.push(i);
                }
            }else if(undefined == trIndex){
                //判断是反选清空所有所选商品
                trIndexList = [];
            }else{
                //判断复选框的选中状态，进行增加 | 删除
                if(obj.checked){
                    //添加选中的下标至数组末尾
                    trIndexList.push(trIndex);
                }else{
                    //从数组中删除取消的一个元素
                    trIndexList.splice($.inArray(trIndex,trIndexList),1);
                }
            }
        });

        //【监听头部工具栏事件】销售管理主页（添加商品 | 删除商品）
        table.on('toolbar(currentTableId)', function (obj) {
            if (obj.event === 'addProduct') {
                //获取所在的仓库名称
                //inveDescDepot = $('select[name=depotId]>option[value='+form.val('proSalesInfo').depotId+']').html();
				//获取所在仓库的编号
				inveDescDepot = form.val('proSalesInfo').depotId;

                //弹窗sell_addProduct
                var index = layer.open({
                    title: '添加商品（销售管理）',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'sell_addProduct.html',
					end:function () {
                        /*//取得新选择的商品信息保存给一个变量
                        var proInfoList = JSON.parse(window.dataInfo);
                        //添加数组循环添加
                        for(var proInfo in JSON.parse(window.dataInfo)){
                            proInfoList.push(proInfo)
						}*/
                        //重载数据表格(currentTableId)
                        table.reload('currentTableId',{
                            // 填充信息
                            //data: JSON.parse(window.dataInfo)
							data: chooseProInfoLists
                        });

                        //计算应收金额
                        var totalPrice = 0;
                        for(var i=0,len=chooseProInfoLists.length;i<len;i++){
                            totalPrice += +(chooseProInfoLists[i].proDescTotal);
                        }
                        //赋给应收金额框
                        $('input[name=salOrdReceivable]').val(totalPrice.toFixed(2));
                        $('input[name=salOrdPaidIn]').val(totalPrice.toFixed(2));
                    },
                    cancel: function(index, layero){
                        //获取新增页面的数据
						var chooseProInfos =  window[layero.find('iframe')[0]['name']].chooseProInfoList;
						//判断是否有未保存的数据
						if(0 == chooseProInfos.length){
						    //没有直接关闭弹窗
                            layer.close(index);
						}else if(confirm('数据还未保存，是否要退出操作！')){
                            //只有当点击confirm框的确定时，该层才会关闭
							layer.close(index);
						}
                        return false;
                    }
                });
            }else if(obj.event === 'delProduct'){
                //升序排列
                trIndexList = trIndexList.sort();
                //判断数据的删除操作
                if(null != trIndexList && 0<trIndexList.length){
                    layer.open({
                        content: '确认要删除选中的数据么',
                        yes: function(index, layero){
                            //循环遍历选中的行下标
                            for ( var i=0,len=trIndexList.length;i<len;i++ ) {
                                //删除选中的数据行
                                chooseProInfoLists.splice(trIndexList[i], 1);
                                //判断选中的行数大于一条且不是最后一条时，改变后一条的位置的值
                                if (1 < trIndexList.length && i != trIndexList.length - 1) {
                                    //后一条前移(i+1)位
                                    trIndexList[i + 1] = trIndexList[i + 1] - 1 - i;
                                }
                            }
                            //重载数据表格
                            table.reload('currentTableId',{
                                data:chooseProInfoLists
                            });
                            //清空保存下标位置的数组
                            trIndexList = [];

                            //判断是否还有数据
							if('' == chooseProInfoLists.length){
							    //取消禁用出货仓库的选择
							    $('#depot').attr('disabled',false);
                                //重新渲染表单
							    form.render();
							}

                            //手动关闭弹窗
                            layer.close(index);
                        }
                    });
                }else {
                    layer.msg('没有选择待删除的数据！',{time:500});
				}
            }
        });

        // 销售管理主页（编辑商品信息）
        table.on('rowDouble(currentTableId)', function(obj){
            var data = obj.data;//JSON.stringify(data)

            //格式化生产日期和有效期
            data.inveDescStartDate = getFormatDate(data.inveDescStartDate);
            data.inveDescValidityDate = getFormatDate(data.inveDescValidityDate);

            //JSON格式对象 --> String对象
            window.productInfo = JSON.stringify(data);
            //声明全局的变量以供子窗体使用
            window.table = tableList[0];
            // 区分编辑后刷新的表格
            window.editProductFlag = true;

            var index = layer.open({
                title: '商品信息（销售管理）',
                type: 2,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['80%', '90%'],
                content: 'sell_editProduct.html',
                zIndex: 66666667
            });

            //标注选中样式
            //obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });

        // 客户名称下拉选项（新增客户信息）【监听头部工具栏事件】
        table.on('toolbar(custmoter)' , function(obj){
            switch(obj.event){
                case "addCustomer":
                    var index = layer.open({
                        title: '增加客户',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['80%', '90%'],
                        content: 'sell_addCustomer.html',
                        zIndex: 66666667
                    });
                    break;
            }
        });

        // 客户名称下拉选项（编辑客户信息）【监听行工具事件】
        table.on('tool(custmoter)',function(obj){
            switch(obj.event){
                case "editCustomer":
                    var data = obj.data;//JSON.stringify(data)
                    //JSON格式对象 --> String对象
                    window.custmoterInfo = JSON.stringify(data);

                    var index = layer.open({
                        title: '编辑客户',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['80%', '90%'],
                        content: 'sell_editCustomer.html',
                        zIndex: 66666667
                    });
                    break;
            }
        });

        /*//声明一个保存更改前数据的集合
        var salOrdNumList = chooseProInfoLists;
        //按键被松开时，根据开药幅数计算商品数量
        $('input[name=salOrdNum]').on('keyup',function () {
			//开药幅数
			var salOrdNum = $(this).val();
            //判断开药幅数是否符合规范
            if(isNaN(salOrdNum) || 1 > +salOrdNum || '' == salOrdNum){
                layer.msg('请输入大于0的数',{time:200},function () {
                    $('input[name=salOrdNum]').val(1);
                })
            }
			for (var i = 0, len = chooseProInfoLists.length; i < len; i++) {
			    //未输入间接
                salOrdNum = (salOrdNum=='' || isNaN(salOrdNum) || 1>+salOrdNum)?1:salOrdNum;
                chooseProInfoLists[i].proNum = +salOrdNumList[i].proNum * +salOrdNum;
                chooseProInfoLists[i].proDescTotal = +salOrdNumList[i].proDescTotal * +salOrdNum;
			}
			console.log('salOrdNumList='+JSON.stringify(salOrdNumList))
			console.log('chooseProInfoLists='+JSON.stringify(chooseProInfoLists))
            //刷新数据表格
            table.reload('currentTableId',{
                data: chooseProInfoLists
            })
        })*/

        //设置销售订单编号
		var inputSalOrdId = $('input[name=salOrdId]');
        inputSalOrdId.val(createSalesOrdId());
        // 确认保存按钮单击操作（保存销售订单信息，更改库存数量）
		$('#confirm').click(function () {
		    //获取到销售订单的信息，设置销售订单中的客户编号
		    var proSalesOrderInfo = form.val('proSalesInfo');
            proSalesOrderInfo.custId = custId;
		    //将获取到的商品销售订单新增信息，转成JSON字符串格式
            var proSalesOrder = JSON.stringify(proSalesOrderInfo);

            //获取到商品销售订单明细的新增信息，存入指定数组中
            var proSalesOrderDesc = [];
		    for(var i=0,len=chooseProInfoLists.length;i<len;i++){
			    var o = chooseProInfoLists[i];
			    proSalesOrderDesc.push({
					"salOrdDescId":(inputSalOrdId.val()+i),
					"salOrdId":inputSalOrdId.val(),
					"productId":o.proId,
					"salOrdDescProNum":o.proNum,
					"salOrdDescProPrice":o.inveDescPrice,
					"salOrdDescProName":o.inveDescName,
					"salOrdDescProBatchNum":o.inveDescBatchNum,
					"salOrdDescProStartDate":o.inveDescStartDate,
					"salOrdDescProValidityDate":o.inveDescValidityDate,
					"salOrdDescComment":o.inveDescComment,
					"salOrdDescUnit":o.inveDescUnit,
					"salOrdDescManufacturer":o.inveDescManufacturer
				})
			}
            //转成JSON字符串格式后去除 '[' 与 ']'
            proSalesOrderDesc = JSON.stringify(proSalesOrderDesc).replace('[','').replace(']','');

			//判断是否添加了商品销售订单明细
			if(null!=proSalesOrderDesc && 0<proSalesOrderDesc.length){
			    //判断是否选择的客户
                if(null != proSalesOrderInfo.custId){
                    //局部刷新进行操作，跳转页面
                    $.ajax({
                        url: "/insertSalesProInfo/"+proSalesOrder+"/"+proSalesOrderDesc,
                        type: 'get',
                        success: function (obj) {
                            if(JSON.parse(obj)){
                                layer.msg('新增销售信息成功！',{time:300},function () {
                                    location.href='sell_productManager.html';
                                });
                            }else{
                                layer.msg('新增销售信息失败！',{time:300})
                            }
                        }
                    });
                }else {
                    layer.msg('请选择客户！',{time:500});
				}
			}else{
                layer.msg('请添加商品！',{time:500});
			}
        });

        /* ---------- 填充出货仓库下拉选项 ---------- */
        $.ajax({
            url: '/showDepotInfo',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                $.each(data, function (index, item) {
                    // 下拉菜单里添加元素
                    $('#depot').append(new Option(item.depotName,item.depotId));
                });
                //重新渲染 固定写法
                layui.form.render("select");
            }
        });

        /* ---------- 填充经办人下拉选项 ---------- */
        $.ajax({
            url: '/showEmpInfo',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                $.each(data, function (index, item) {
                    // 下拉菜单里添加元素
                    $('#emp').append(new Option(item.empName,item.empId));
                });
                //重新渲染 固定写法
                layui.form.render("select");
            }
        });

        /* ---------- 是否补零操作 ---------- */
        function isAddZero(num){
           return num<10 ? "0"+num : num;
		}

        /* ---------- 日期格式化的函数 ---------- */
        function getFormatDate(obj) {
            var date = new Date(obj);

            var year = isAddZero(date.getFullYear());
            var month = isAddZero(date.getMonth()+1);
            var day = isAddZero(date.getDate());

            return year + "-" + month + "-" + day;
        }

        /* ---------- 生成订单编号的函数 ---------- */
        function createSalesOrdId(){
            var date = new Date();

            var y = isAddZero(date.getFullYear()); //获取当前年
            var month = isAddZero(date.getMonth() + 1); //获取当前月
            var d = isAddZero(date.getDate()); //获取当前日
            var h = isAddZero(date.getHours());//获取当前小时数(0-23)
            var m = isAddZero(date.getMinutes());//获取当前分钟数(0-59)
            var s = isAddZero(date.getSeconds());//获取当前秒

            return "XS"+y+month+d+h+m+s;
		}

        //监听行事件（双击编辑客户下拉选项信息）
        /* table.on('row(custmoter)', function(obj){
            var data = obj.data;//JSON.stringify(data)

            //JSON格式对象 --> String对象
            window.custmoterInfo = JSON.stringify(data);

            var index = layer.open({
                title: '编辑客户',
                type: 2,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['80%', '90%'],
                content: 'sell_editCustomer.html',
                zIndex: 66666667
            });

            //标注选中样式
            //obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        }); */

        //监听单元格编辑(客户下拉选项信息)
        /* table.on('edit(custmoter)', function(obj){
            var value = obj.value //得到修改后的值
            ,data = obj.data //得到所在行所有键值
            ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.custId +'] ' + field + ' 字段更改值为：'+ util.escape(value),{zIndex:99999999});
        }); */

        //获取当前时间
        /*$(function() {
            var myDate = new Date;
            var year = myDate.getFullYear(); //获取当前年
            var mon = myDate.getMonth() + 1; //获取当前月
            var date = myDate.getDate(); //获取当前日
            // var h = myDate.getHours();//获取当前小时数(0-23)
            // var m = myDate.getMinutes();//获取当前分钟数(0-59)
            // var s = myDate.getSeconds();//获取当前秒
            var week = myDate.getDay();
            var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            console.log(year, mon, date, weeks[week])
            $("#time").html(year + "年" + mon + "月" + date + "日" + weeks[week]);
        })*/
    })
</script>
</body>
</html>
